<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			/* 外边距margin属性：【微调：文字或者图片】
			 margin使用问题1   自适应居中  建议使用div，套块元素，行内块元素，行内元素
			       使用问题2   行元素  加上下  右左外边距
			           行元素：不可以设置高宽【高---不可以动上下】、在一行显示【宽---可以左右动】、无法居中、无法显示、内置文本
 			       使用问题3：垂直外边距
			       使用问题4：垂直外边距
			 */
			img{
				border:1px solid red;
				/* margin：1个属性值  顺时针：上  右  下  左 */
				margin:200px;
				/* margin：2个属性值  顺时针：上下  右左 */
				margin:10px 200px;
				/* 常用：盒子自适应居中---失效
				   行内块：可以设置高宽 ，在一行内显示，无法居中
				   margin使用问题1   自适应居中  必须设置高宽
				 */
				
				margin: 0 auto;
				/* margin：3个属性值  顺时针：上右左  下 */
				ma rgin: 100px 200px 300px;
				/* margin：4个属性值  顺时针：上 右 下 左 */
			    mar gin: 100px 200px 300px 400px;
			}
			h1{
				/* 块元素：可以设置高宽、不是一行显示，无法居中，内置文本
				   text-align：center；
				 */
				/* 常用：盒子自适应居中---失效 */
				width: 100%;
				border: 1px solid red;
				margin: 200px  200px;
				text-align: center;
			}
			span{
				/* 
				 行元素不可以设置高宽【高---不可以动上下】、在一行显示【宽---可以左右】、无法居中、无法显示、内置文本
				 text-align：center；
				 */
				/* 常用：盒子自适应居中 */
				width: 100%;
				border: 2px solid red;
				margin: 20000px 200px;
				text-align: center;
			}
			div{
				width: 200px;
				height: 200px;
				background: red;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div></div>
		<!-- 框模型、盒子模型、四个部分组成：
		                外边距：边框以外四周，叫做外边距
						margin属性
						边框：-
						内边距：边框以内  与内容之间的距离，叫做内边距
						内容：块，行，行内块元素本身宽高
		所有元素存在于框模型中 -->
		<h1>块级元素</h1>
		<img src="img/圣诞节装饰PNG免抠元素 (27)_爱给网_aigei_com.png" width="300px" height="300px" alt="圣诞" />
	    <span>行内元素：圣诞</span>
	</body>
</html>